import React from 'react'

const smallWithMeta = () => (
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="72" height="72" viewBox="0 0 72 72">
      <path d="M48.992,53.0045 L23.009,53.0045 C21.358,53.0045 20.01,51.6595 20.01,50.0035 L20.01,21.9965 C20.01,20.3375 21.358,18.9955 23.009,18.9955 L48.992,18.9955 C50.649,18.9955 51.99,20.3375 51.99,21.9965 L51.99,50.0035 C51.99,51.6595 50.649,53.0045 48.992,53.0045 L48.992,53.0045 L48.992,53.0045 Z M27.989,47.9995 L43.989,47.9995 C45.094,47.9995 45.989,47.1045 45.989,45.9995 C45.989,44.8945 45.094,43.9995 43.989,43.9995 L27.989,43.9995 C26.884,43.9995 25.989,44.8945 25.989,45.9995 C25.989,47.1045 26.884,47.9995 27.989,47.9995 L27.989,47.9995 L27.989,47.9995 Z M45.993,24.9965 L26.008,24.9965 L26.008,39.0025 L45.993,39.0025 L45.993,24.9965 L45.993,24.9965 Z" fill="#333333"></path>
    </svg>
  </a>
)

const largeWithMeta = () => (
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="72" height="72" viewBox="0 0 72 72">
      <path d="M56.992,61.0045 L15.009,61.0045 C13.358,61.0045 12.01,59.6595 12.01,58.0035 L12.01,13.9965 C12.01,12.3375 13.358,10.9955 15.009,10.9955 L56.992,10.9955 C58.649,10.9955 59.99,12.3375 59.99,13.9965 L59.99,58.0035 C59.99,59.6595 58.649,61.0045 56.992,61.0045 L56.992,61.0045 Z M19.989,55.9995 L51.989,55.9995 C53.094,55.9995 53.989,55.1045 53.989,53.9995 C53.989,52.8945 53.094,51.9995 51.989,51.9995 L19.989,51.9995 C18.884,51.9995 17.989,52.8945 17.989,53.9995 C17.989,55.1045 18.884,55.9995 19.989,55.9995 L19.989,55.9995 Z M53.993,16.9965 L18.008,16.9965 L18.008,47.0025 L53.993,47.0025 L53.993,16.9965 L53.993,16.9965 Z" fill="#333333"></path>
    </svg>
  </a>
)

const smallWithoutMeta = () => (
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="72" height="72" viewBox="0 0 72 72">
      <path d="M48.992,49.0045 L23.009,49.0045 C21.358,49.0045 20.01,47.6595 20.01,46.0035 L20.01,25.9965 C20.01,24.3375 21.358,22.9955 23.009,22.9955 L48.992,22.9955 C50.649,22.9955 51.99,24.3375 51.99,25.9965 L51.99,46.0035 C51.99,47.6595 50.649,49.0045 48.992,49.0045 L48.992,49.0045 Z M45.993,28.9965 L26.008,28.9965 L26.008,43.0025 L45.993,43.0025 L45.993,28.9965 L45.993,28.9965 Z" fill="#333333"></path>
    </svg>
  </a>
)

const largeWithoutMeta = () => (
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="72" height="72" viewBox="0 0 72 72">
      <path d="M56.992,57.0045 L15.009,57.0045 C13.358,57.0045 12.01,55.6595 12.01,54.0035 L12.01,17.9965 C12.01,16.3375 13.358,14.9955 15.009,14.9955 L56.992,14.9955 C58.649,14.9955 59.99,16.3375 59.99,17.9965 L59.99,54.0035 C59.99,55.6595 58.649,57.0045 56.992,57.0045 L56.992,57.0045 Z M53.993,20.9965 L18.008,20.9965 L18.008,51.0025 L53.993,51.0025 L53.993,20.9965 L53.993,20.9965 Z" fill="#333333"></path>
    </svg>
  </a>
)

export default [
  { name: 'small-with-meta', size: 'small', withMeta: true, per: 24, component: smallWithMeta },
  { name: 'large-with-meta', size: 'large', withMeta: true, per: 12, component: largeWithMeta },
  { name: 'small-without-meta', size: 'small', withMeta: false, per: 24, component: smallWithoutMeta },
  { name: 'large-without-meta', size: 'large', withMeta: false, per: 12, component: largeWithoutMeta }
]
